<template>
	<view class="goods_detail">
		<view v-for="(item,index) in GoodsDetail" :key="index" class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="k in sliderImage" :key="k.uid">
					<image :src="util.imageApi+k.url" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
			<view class="Goods_info">
				<view class="Goods_price">
					<view class="price">
						<view class="Zprice">
							￥<span>{{item.price}}</span>
							<!-- <view class="otPrice">价格<span>￥{{item.otPrice}}</span></view> -->
						</view>
					</view>
					<view class="Sc_icons" @click="collectClick()">
						<!-- <uni-icons type="heart" size="30"></uni-icons> -->
						<span>月销</span>{{item.sales}}
					</view>
				</view>
				<view class="Goods_title">
					{{item.storeName}}
				</view>

			</view>
			<!-- <view class="consult">
				<view class="consult_image">
					<image :src="util.imageApi+item.businessImg" mode=""></image>
				</view>
				<view class="consult1">
					{{item.businessName}}

				</view>
			</view> -->
	<!-- 		<u-gap height="10" bgColor="#f9f9f9"></u-gap>
			<u-sticky offsetTop="0" style="width: 100%; height: 7vh; background-color: white;">
				<view class="Goods_tab">
					<a v-for="(item,index) in TabList" :key="index" @click="TabClick(index,item)"
						:class="item.indexValue === true ? 'Goods_if' :''">
						<block>{{item.name}}</block>
					</a>
				</view>
			</u-sticky>
			<u-gap height="10" bgColor="#f9f9f9"></u-gap> -->
			<!-- <view class="Goods_evaluate">
				<view class="Goods_evaluate_info">
					暂无评价
				</view>
			</view> -->
			<!-- <u-gap height="10" bgColor="#EFECEC"></u-gap> -->
			<view class="Goods_particulars_title">
				商品详情
			</view>
			<view class="Goods_particulars">
				<image v-for="k in detailImg" :key="k.uid" :src="util.imageApi+k.url" mode="widthFix"></image>
				<!-- <image src="https://s1.ax1x.com/2022/05/16/OWVWFK.png" mode=""></image>
				<image src="https://s1.ax1x.com/2022/05/16/OWVhWD.png" mode=""></image>
				<image src="https://s1.ax1x.com/2022/05/16/OWVIQH.png" mode=""></image>
				<image src="https://s1.ax1x.com/2022/05/16/OWVHeI.png" mode=""></image>
				<image src="https://s1.ax1x.com/2022/05/16/OWVqTP.png" mode=""></image>
				<image src="https://s1.ax1x.com/2022/05/16/OWVxSg.png" mode=""></image> -->
			</view>
		<!-- 	<view class="Goods_recommend">
				<view class="Goods_recommend_title">
					推荐商品
				</view>
				<view class="gold">
					<view class="gold_info" v-for="(k,index) in goldList" :key="index" @click="goodsClick(item)">
						<view class="gold_info_image">
							<image :src="util.imageApi+k.image" mode=""></image>
						</view>
						<view class="gold_title">
							{{k.storeName}}
						</view>
						<view class="gole_price">
							￥<span>{{k.price}}</span>
						</view>
						<view class="gold_fuke">
							<view class="gold_fuke_price">
								￥{{k.otPrice}}
							</view>
							<view class="gold_sales">
								{{k.sales}}已售
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<u-popup :closeOnClickOverlay="true" :show="show" :round="25" mode="bottom" @close="close()">
				<view class="hint">
					<view class="Presented">
						赠送明细
					</view>
					<view class="MX">
						明细
					</view>
					<view class="Jf">
						<text>固定积分</text>购买可得固定{{item.giveIntegral}}积分
					</view>
					<view class="Jf">
						<text>静态积分</text>购买可得静态
						{{item.giveIntegral}}积分
					</view>
				</view>
			</u-popup>
			<view class="btn_tool">
				<view class="tool_item">
					<image src="../../static/3x/kefu.png"></image>
					<view>客服</view>
					<button open-type="contact"></button>
				</view>
				<!-- 				<view class="tool_item">
					<uni-icons type="shop-filled"></uni-icons>
					<view>店铺</view>
					<button open-type="share"></button>
				</view> -->
				<navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
					<image src="../../static/3x/add.png"></image>
					<view>购物车</view>
				</navigator>
				<view class="Buuton">
					<view class="tool_item btn_cart" bindtap="handleCartAdd" @click="GoShop(item)">
						加入购物车
					</view>
					<view class="tool_item btn_buy" @click="Gobay()">
						立即购买
					</view>
				</view>
			</view>
			<u-popup :show="Shopshow" mode="bottom" :round="10" @close="ShopClose()" class="ShopPopup">
				<view>
					<view class="Shop_DETAIL">
						<view class="ShopInfo">
							<view class="ShopImage">
								<image :src="util.imageApi+item.image"></image>
							</view>
							<view class="ShopClose_info">
								<view class="ShopPrice">
									￥<span>{{item.price}}</span>
								</view>
								<view class="ShopClose" @click="ShopClose()">
									<uni-icons type="closeempty"></uni-icons>
								</view>
							</view>

						</view>
						<view class="Buy_shop_size">
							<view class="shop">
								购买数量
							</view>
							<view class="size">
								<u-number-box v-model="value"></u-number-box>
							</view>
						</view>
						<view class="Bottom_button">
							<u-button class="AddShop" color="#88A58A" @click="AddShop(item)">确认</u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<u-toast ref="uToast"></u-toast>
		</view>


	</view>
</template>

<script>
	import util from "@/util/index.js"
	export default {
		components: {

		},
		data() {
			return {
				sliderImage: [],
				detailImg: [],
				util: util,
				value: 1,
				goldList: [],
				GoodsDetail: {},
				show: false,
				Shopshow: false,
				TabList: [{
					name: '宝贝',
					indexValue: true,
					id: 'header'
				}, {
					name: '详情',
					indexValue: false,
					id: 'Goods_particulars_title'
				}, {
					name: '评价',
					indexValue: false,
					id: 'Goods_evaluate'
				}, {
					name: '推荐',
					indexValue: false,
					id: 'gold'
				}],
				GoPay: false
			}
		},
		methods: {

			AddShop(item) {
				if (this.GoPay) {
					uni.navigateTo({
						url: '/pages/qrSites/qrSites?pid=' + item.id + '&num=' + this.value
					})
				} else {
					this.$http({
						url: '/crmStoreCart/insCrmStoreCart',
						data: {
							productId: item.id,
							cartNum: this.value,
						},
					}).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								title: "添加成功",
								icon: "none"
							}).then(this.Shopshow = false)
						}
					})
				}
			},
			ShopClose() {
				this.Shopshow = false
			},
			GoShop(item) {
				if (item.id == 3 || item.id == 2 || item.id == 4 || item.id == 5) {
					return
				}
				this.Shopshow = true;
				this.GoPay = false
			},
			Gobay(item) {
				this.Shopshow = true
				this.GoPay = true
			},
			onClick(e) {},
			buttonClick(e) {
				this.options[2].info++
			},
			goodsClick(item) {
				uni.navigateTo({
					url: '../goods-detail/goods-detail?id=' + item.id
				})
			},
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			getGoodsDetail(id) {
				this.$http({
					url: '/crmStoreProduct/selCrmStoreProductDetailed?id=' + id,
					method: 'POST',
				}).then(res => {
					this.GoodsDetail = res.data.data.list
					if (this.GoodsDetail[0].sliderImage) {
						this.sliderImage = this.GoodsDetail[0].sliderImage
							.split(",")
							.map((item, index) => {
								return {
									url: item,
									uid: Date.now() + index,
								};
							});
					}
					if (this.GoodsDetail[0].detailImg) {
						this.detailImg = this.GoodsDetail[0].detailImg
							.split(",")
							.map((item, index) => {
								return {
									url: item,
									uid: Date.now() + index,
								};
							});
					}
				})
			},
			collectClick() {

			},
			TabClick(index, info) {
				if (info.indexValue === false) {
					// console.log(info.indexValue)
					this.TabList.map(item => {
						return item.indexValue = false
					})
					this.TabList[index].indexValue = true
					if (info.id && info.indexValue === true) {
						const query = uni.createSelectorQuery().in(this);
						query.select('.' + info.id).boundingClientRect(data => {
							// console.log("得到布局位置信息" + JSON.stringify(data));
							// console.log("节点离页面顶部的距离为" + data.top);
							uni.pageScrollTo({
								duration: 300,
								scrollTop: data.top
							})
						}).exec();
					}
				} else {

				}
			},
			//评论
			// SearchComment(id) {
			// 	this.$http({
			// 		url: '/crmOrderComment/selCrmOrderComment',
			// 		data: {
			// 			id: id
			// 		},
			// 		method: 'GET'
			// 	}).then(res => {
			// 		console.log(res)
			// 	})
			// }
		},
		onLoad(options) {
			this.getGoodsDetail(options.id)
		},
	}
</script>

<style scoped>
	@import './goods-detail';
</style>
